<template>
  <!-- body -->
  <div class="find-car-detail page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- 顶部导航栏 -->
    <!-- <van-nav-bar title="寻车详情" fixed placeholder :border="false"> -->
      
      <!-- 导航栏左侧返回按钮 -->
      <!-- <template #left>
        <van-icon name="arrow-left" size="18" @click="goback" />
      </template> -->
      <!-- 导航栏右侧查看更多按钮 -->
      <!-- <template #right>
        <van-icon name="ellipsis" size="18" @click="getMoreChange" />
      </template>
    </van-nav-bar> -->
    <navbar title="寻车详情" typePage='生成订单'></navbar>

    <!--寻车信息标题区域 -->
    <div class="judge-order">
      <span>寻车信息</span>
    </div>
    <!-- 寻车信息主体区域 -->
    <div>
      <van-cell-group>
        <van-field v-model="form.carModelGuidePrice" label="指导价 (万元)" placeholder="请输入指导价" required  oninput="if(value.length>20)value=value.slice(0,19)"  type="number"/>
        <van-field v-model="form.region" label="地区" placeholder="请输入地区" :maxlength="20" required />
        <van-field v-model="form.carColor" label="颜色" placeholder="请输入颜色" :maxlength="20" required  />
        <van-field v-model="form.knowTheBestPrice" label="了解最优惠落地价" placeholder="请输入优惠价" oninput="if(value.length>20)value=value.slice(0,19)" /><!--  type="number" -->
        <van-field v-model="form.userName" label="姓名" placeholder="请输入姓名" :maxlength="50" required />
      </van-cell-group>
    </div>
    <!-- 信息费标题区域 -->
    <div class="judge-order">
      <!-- active-wait -->
      <span>信息费</span>
    </div>
    <!-- 信息费主体区域 -->
    <div class="message_info">
      <span>
        <span style="color: red">*</span>
        信息费
      </span>
      <div class="switch_style">
        <van-switch v-model="isNeedMessage" size="24px" @change="switchChange" />
      </div>
      <input v-model="form.informationCosts" :disabled="!isNeedMessage"  oninput="if(value.length>6)value=value.slice(0,5)" type="number" :placeholder="isNeedMessage ? '请输入信息费' : ''"  onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" />
      <!-- <van-cell-group>
        <van-field label="信息费" placeholder="请输入信息费" required>
          <template #Switch> <van-switch v-model="isNeedMessage" /> </template>
        </van-field>
        <div></div>
      </van-cell-group> -->
    </div>
    <div style="height:5vh;margin-bottom: -2vh;display: flex;justify-content: center;align-items: center;color:red;">
      <span>（微信/支付宝支付,单笔限额100万元以下）</span>
    </div>
    <!-- 内部销售标题区域 -->
    <div class="judge-order">
      <!-- active-wait -->
      <span>内部销售</span>
    </div>
    <!-- 内部销售主体区域 -->
    <div>
      <van-cell-group>
        <van-cell title="销售" :value="applicationInfo.internalSales || '---'" />
      </van-cell-group>
    </div>
    <!-- 底部生成订单按钮 -->
    <div class="btn_vant">
      <van-button type="info" size="large" @click="createOrder"
        >生成订单</van-button
      >
    </div>

    <!-- 更多操作弹出层 -->
    <van-popup
      v-model="showMoreHandle"
      round
      position="bottom"
      :style="{ width:'90%',height: '206px', margin:'0 0 0 5%' }"
    >
      <div class="popup_big_box">
        <div style="margin-top:22px">
          <span style="color:red;">完结</span>
        </div>
        <van-divider />
        <div>
          <span style="color:red;">退款</span>
        </div>
        <van-divider />
        <div>
          <span style="color:red;">取消订单</span>
        </div>
        <van-divider/>
        <div @click="showMoreHandle = false">
          <span style="color:blue;">取消</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import {getCarManagementCCreateOrderC} from '../api'
export default {
  data() {
    return {
      // 信息费开关状态
      isNeedMessage: true,
      // 更多操作弹出层状态
      showMoreHandle: false,
      // 页面回显值
      applicationInfo:[],
      form:{
        // 指导价
        carModelGuidePrice:null,
        // 地区
        region:null,
        // 颜色
        carColor:null,
        // 优惠价
        knowTheBestPrice:null,
        // 姓名
        userName:null,
        // 信息费
        informationCosts:null,
        // id
        id:'',
      },
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:null
    };
  },
  methods: {
    // 生成订单
    async createOrder() {
      /* 生成订单校验 start */

      // 指导价校验
      if (this.form.carModelGuidePrice == null || this.form.carModelGuidePrice == '') {return Toast('指导价不能为空！')}
      // 地区校验
      if (this.form.region == null || this.form.region == '') {return Toast('地区不能为空！')}
      // 颜色校验
      if (this.form.carColor == null || this.form.carColor == '') {return Toast('颜色不能为空！')}
      // 优惠价校验
      // if (this.form.knowTheBestPrice == null || this.form.knowTheBestPrice == '') {return Toast('优惠价不能为空！')}
      // 姓名校验
      if (this.form.userName == null || this.form.userName == '') {return Toast('姓名不能为空！')}

      // 信息费校验
      if (this.isNeedMessage == true) {
        if (this.form.informationCosts == null || this.form.informationCosts == '') {return Toast('信息费不能为空！')}
      }
      if (this.form.knowTheBestPrice == null || this.form.knowTheBestPrice == ''){
        this.form.knowTheBestPrice = null
      }
      /* 生成订单校验 end */
      let carModelGuidePrice = String(this.form.carModelGuidePrice * 10000).split(".")[0]
      // carModelGuidePrice = String(carModelGuidePrice).replace(/^(.*\..{4}).*$/, '$1')
      // carModelGuidePrice = Number(carModelGuidePrice)
      let params = {
        ...this.form,
        // informationCosts: this.isNeedMessage == true ?  this.form.informationCosts * 100 : null,
        informationCosts: this.form.informationCosts * 100,
        carModelGuidePrice
      }
      const data = await getCarManagementCCreateOrderC(params)
      if(data.code !== 0) return Toast(data.msg)
      Toast("生成订单");
      this.$router.push({
        name: "findCarManagement",
        query:{
          activeFindCar:'allFindCar'
        }

      });
    },
    // switch 触发事件
    switchChange(isNeedMessage){
      if (isNeedMessage == false) {
        this.form.informationCosts = null
      }
    },
    // 返回按钮
    goback() {
      this.$router.go(-1);
    },
    // 更多操作 => 弹出层
    getMoreChange() {
      this.showMoreHandle = true;
    },
  },
  created() {
    // 获取屏幕状态栏高度
    this.phoneStatusBarHeight = window.phoneStatusBarHeight
    this.applicationInfo = this.$route.params.applicationInfo
    this.form.id = this.applicationInfo.id
    this.form.carModelGuidePrice = this.applicationInfo.carModelGuidePrice
  },
  //设置背景颜色
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#F8F8F8");
  },
};
</script>

<style scoped lang="less">
.selectPay {
  p {
    text-align: center;
  }
  .pay-img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    img:nth-child(1) {
      width: 110px;
      height: 110px;
      padding-right: 50px;
    }
    img:nth-child(2) {
      width: 90px;
      height: 90px;
    }
  }
}
.advice-note {
  margin: 8px 0;
}
.pay-for {
  display: flex;
  padding: 0 16px;
  button {
    flex: 1;
    height: 44px;
    border: none;
    background-color: #ffffff;
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-radius: 5px;
    margin-bottom: 50px;
  }
  button:nth-child(2) {
    background-color: #f6c401;
    margin-left: 9px;
  }
  button:nth-child(1) {
    border: 1px solid #e6e6e6;
  }
}
.agreement {
  padding: 16px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  span {
    color: #666666;
    a {
      color: #f6c401;
    }
  }
}
.find-car-inform {
  margin-bottom: 8px;
}
.application-info {
  border: 1px solid #eeeeee;
}
.someTime {
  padding: 16px;
  div {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    .left {
      color: #666666;
      margin: 1% 0;
    }
    .right {
      color: #333333;
    }
  }
}
.to-be-paid {
  .user-brevity {
    height: 100px;
    background-color: #ffffff;
    padding: 16px;
    box-sizing: border-box;
    font-family: PingFangSC-Regular, PingFang SC;
    div {
      display: flex;
      justify-content: space-between;
      div {
        padding: 2% 0;
      }
      .left {
        font-size: 15px;
        font-weight: 400;
        color: #666666;
      }
    }
  }
}
.active-wait {
  background-color: rgba(254, 140, 25, 0.1);
  color: #fe8c19;
}
.finsh-pay {
  color: #0d7ef0;
  background-color: rgba(13, 126, 240, 0.1);
}
.finsh {
  color: #999999;
  background-color: rgba(153, 153, 153, 0.1);
}
.find-car-detail {
  width: 100%;
  height: 100%;
}
.judge-order {
  box-sizing: border-box;
  width: 375px;
  height: 40px;
  padding: 0 16px;
  span {
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 40px;
  }
}
.btn_vant {
  position: fixed;
  bottom: 3vw;
  left: 3vw;
  right: 3vw;
}
.message_info {
  width: 100vw;
  height: 5vh;
  background-color: #fff;
  color: #323233;
  font-size: 3.73333vw;
  display: flex;
  align-items: center;
  // justify-content: space-around;
  span {
    margin-left: 1vh;
  }
  input {
    border: unset;
    margin-left: 5vw;
  }
  input:disabled {
    background-color: #fff;
  }
  .switch_style {
    margin-left: 5vw;
  }
}
.btn_vant {
  position: fixed;
  bottom: 3vw;
  left: 3vw;
  right: 3vw;
}
.popup_big_box {
  div {
    display: flex;
    justify-content: center;
  }
}
</style>
<style lang="less">
.find-car-detail {
  .van-button--large {
    border-radius: 2vw;
    height: 12vw;
  }
}
</style>